<template>
	<div class="wrap">	
		<div class="body bigScreen_process">
           <div class="left echarts_box">
		    	<div class="headline">			  	    	 	 
		    	 	 <span class="title">企业统计 TOP5</span>			  	    	 	 
		    	</div>  
		    	
		    	<div class="ul">
		    		<div class="li" v-for="(item,index) in dept" :key="index">
		    			<div class="li1">
		    				<span>{{item.name}}</span>
		    			</div>
		    			<div class="li2">
		    				<el-progress :percentage="item.percentag" :show-text="false" color="#50E4C3"></el-progress>
		    			</div>
		    			<div class="li3">
		    				<span>{{item.value}}</span>
		    			</div>		    			
		    		</div>
		    	</div>
	    	           
           </div>
	       <div class="right echarts_box">
		    	<div class="headline">			  	    	 	 
		    	 	 <span class="title">点位区域分布 TOP5</span>			  	    	 	 
		    	</div>  
		    	<div class="ul">
		    		<div class="li" v-for="(item,index) in area" :key="index">
		    			<div class="li1">
		    				<span>{{item.name}}</span>
		    			</div>
		    			<div class="li2">
		    				<el-progress :percentage="item.percentage" :show-text="false" color="#8EDFFC"></el-progress>
		    			</div>
		    			<div class="li3">
		    				<span>{{item.value}}</span>
		    			</div>		    			
		    		</div>
		    	</div>	    		       	
	       </div>	
    	</div>

	</div>
</template>	

<script>
	export default {
		data() {
			return {
				dept: [		
                    {value:'41.30%',name:'油烟',percentag:41.30},	
                    {value:'24.00%',name:'环境',percentag:24.00},
                    {value:'18.00%',name:'扬尘',percentag:18.00}	,
                    {value:'9.60%',name:'污染源',percentag:9.60},
				    {value:'7.20%',name:'安全',percentag:7.20}				    
				    
				               
				],
                area:[
	                {name:'江苏',value:0,percentage:0},
	                {name:'河北',value:0,percentage:0},
	                {name:'山东',value:0,percentage:0},
	                {name:'上海',value:0,percentage:0},
	                {name:'广西',value:0,percentage:0}
                ]
			}

		},
		mounted() {
          this.init()
		},
		methods: {
		  init(){
		  	this.area=[
                {name:'江苏',value:'89.6%',percentage:89.6},
                {name:'河北',value:'3.0%',percentage:3.0},
                {name:'山东',value:'2.6%',percentage:2.6},
                {name:'上海',value:'2.5%',percentage:2.5},
                {name:'广西',value:'0.6%',percentage:0.6}
                ]
		  }
		}
	}
</script>
<style>
	.bigScreen_process .el-progress-bar__outer{background:#144174 ;}
	.bigScreen_process .right .el-progress-bar{border:1px solid #8EDFFC; border-radius: 100px;}
	.bigScreen_process .left .el-progress-bar{border:1px solid #50E4C3; border-radius: 100px;}
</style>

<style lang="scss" scoped>
.wrap{height: 100%;}
.body{
   height: 100%;
   display: flex;justify-content: space-between;
   .left{width: 49%;
     
   }
   .right{width:49%;}
   .ul{margin-top: 15px;}
   .li{display: flex;align-items: center;margin-bottom: 35px;
     .li1{width: 60px;text-align: center;color: #ccc;font-size: 12px;}
     .li2{flex: 1;}
     .li3{width: 50px;text-align: center;color: #ccc;font-size: 12px;}
   }
}
	
</style>
